<template>
    <!--这个标签内容 编写的是 html标签 DOM标签 h5里面叫语义化标签-->
    <div class="content">
        <van-row>
            <van-col span="3">
                <van-icon name="bars" size="30" color="#f7f7f7"
                    style="font-weight: 800; margin-left: 15px; margin-top: 13px;" />
            </van-col>
            <van-col span="18">
                <van-search v-model="keyword" shape="round" background="#ff5454" placeholder="请输入搜索关键词"
                    @search="onSearch" />

            </van-col>
            <van-col span="3">
                <van-icon name="friends-o" size="30" color="#f7f7f7"
                    style="font-weight: 800; margin-left: 12px; margin-top: 12px;" />
            </van-col>
        </van-row>
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
            <!--v-for 是vue中的指令 image表示 别名 in 表示查找 images 表示原数组-->
            <van-swipe-item v-for="item in productdata" :key="item">
                <!--v-bind:src 针对当前src属性 进行动态绑定-->
                <img :src="item" width="100%" height="260px" />
            </van-swipe-item>
        </van-swipe>
        <!--通知栏-->
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
        <!--快捷入口图标-->
        <div class="icons">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <van-grid :column-num="5" :icon-size="40">
                        <van-grid-item v-for="value in icondata" :key="value.id" :icon="value.img" :text="value.text" />
                    </van-grid>
                </van-swipe-item>
                <van-swipe-item>
                    <van-grid :column-num="5" :icon-size="40">
                        <van-grid-item v-for="value in icondata2" :key="value.id" :icon="value.img"
                            :text="value.text" />
                    </van-grid>
                </van-swipe-item>

            </van-swipe>
        </div>
        <!--商品展示--->
        <div class="product">
            <van-grid :column-num="2">
                <van-grid-item v-for="item in productList" :key="item" @click="onProduct(item.id)">
                    <img :src="item.imgurl" alt="" width="200" height="200">
                    <!--文本插值表达式{{  }} 专门用来接收数据的-->
                    <span class="texts">{{ item.pname }}</span>
                    <div class="prices">￥<em>{{ item.newprice }}</em></div>
                    <div class="bott">
                        <van-row>
                            <van-col span="16">
                                <span style="color: #c1c1c0; font-size: 15px;">1万+评论</span>
                            </van-col>
                            <van-col span="8">
                                <!-- <div class="kss" @click="kss">看相似</div> -->
                                <van-button type="primary" color="#cfcece" size="mini" url="http://m.jd.com"
                                    round="true">看相似</van-button>
                            </van-col>
                        </van-row>

                    </div>
                </van-grid-item>
            </van-grid>


        </div>






    </div>



    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="friends">个人中心</van-tabbar-item>
    </van-tabbar>


</template>


<script setup>
// js代码 

import { onMounted, ref } from 'vue';
const active = ref(0);
const keyword = ref('')
// 轮播定义
const productdata = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/249598/37/1665/83063/6593e75eFb3b7724d/2085ed88214a2854.jpg',
    'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/5f1334cb1d8d40919ed4a13fc2ec3617~tplv-dcdx-default:0:0.png'
])
// 快捷入口图标[{id:'123',name:'华蓝超市'}]
const icondata = ref([
    { id: 101, text: '华蓝超市', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 102, text: '华蓝电器', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
    { id: 103, text: '服装美装', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png' },
    { id: 104, text: '充值中心', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png' },
    { id: 105, text: '华蓝会员', img: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },

])
const icondata2 = ref([
    { id: 101, text: '华蓝智能', img: 'https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png' },
    { id: 102, text: '华蓝粉丝卡', img: 'https://m.360buyimg.com/babel/jfs/t20270715/237082/37/21845/7616/6694edddFc764124a/38d00b686257b0f4.png' },
    { id: 103, text: '服装美装', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/36751/25/21385/7651/6694ee02F878cddef/13ce837dd39ad1ad.png' },
    { id: 104, text: '充值中心', img: 'https://img20.360buyimg.com/babel/jfs/t20270715/44839/8/24550/7935/6694ee27F8775a577/b63c6a2fa0327964.png' },
    { id: 105, text: '华蓝会员', img: 'https://img14.360buyimg.com/babel/jfs/t20270715/243181/3/13649/9018/6694ee5fF6aa391d4/1b020aa3f9cf89a0.png' },

])
// 商品列表
const productList = ref([
    {
        id: 100, name: 'Apple iPhone 14Pro 苹果14 pro 二手苹果手机 国行全网通5G 暗紫色【店长推荐】 8成新128G国行双卡【豪华大礼包+ 闪充20W】', img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/310716/40/5788/67463/683c3663Fe042a594/52b9e3d593af3eae.jpg', price: '3899.00'
    },
    { id: 101, name: '沃福百瑞沃福百瑞红枸杞原浆宁夏中宁苟杞汁小袋原液300ml 1盒(300ml)', img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/249598/37/1665/83063/6593e75eFb3b7724d/2085ed88214a2854.jpg', price: '68,00' },
    { id: 102, name: '雪花秀顺行柔和洁颜泡沫200ml氨基酸洗面奶补水温和清洁柔滑不紧绷', img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/319954/31/8192/179186/68490083F1ce8675f/978f2e3f4f06ccb2.jpg', price: '320.00' },
    { id: 102, name: '雪花秀顺行柔和洁颜泡沫200ml氨基酸洗面奶补水温和清洁柔滑不紧绷', img: 'https://img3.zuke.com/u/2021051519364842689.jpg', price: '320.00' },
])

import axios from 'axios';
const callproductApi = () => { 
    axios.get('http://localhost:8080/api/product').then(res => { 
        productList.value = res.data
    })
}

onMounted(() => { 
    callproductApi()

})
//搜索的函数体
// function onSearch() { 

// }
const onSearch = () => {
    console.log(keyword.value);

}

//看相似的函数
const kss = () => {
    console.log('我点击了看相似按钮');

}
// 引入路由模块 定义路由对象
import { useRouter } from 'vue-router';
const router = useRouter();
//商品详情页的函数
const onProduct = (id) => { 
    console.log(id);
    //跳转路由
    router.push({ name:'movedetail',query:{id:id}})
}

</script>

<style scoped>
/*scoped 只针对 当前vue中编写的class属性 或id选择器 */
/* css样式 */
.content {
    height: 100vh;
    /* 100%的视口高度 vh 响应式高 */
    background-color: #ff5454;
}

.van-notice-bar {
    color: #f7f4f1;
    font-size: 15px;
    font-weight: 800;
    background: #ff5454;
}

.icons {
    width: 98%;
    height: 105px;
    background-color: white;
    border-radius: 18px;
    margin: 0 auto;

    /* 穿透样式 深度处理 */
    :deep(.van-grid-item__content) {
        border-radius: 20px !important;
        /* 优先级*/
    }
}

/* 商品列表 */
.product {
    width: 100%;
    margin-top: 10px;

    .van-grid {
        padding-bottom: 60px;
    }

    .prices {
        width: 100%;
        margin-top: 10px;
        color: red;

        em {
            font-style: normal;
            color: red;
            font-size: 18px;
            font-weight: 800;
        }

    }

    .texts {
        padding-top: 5px;
        display: -webkit-box;
        /* 必须设置，用于多行溢出 */
        -webkit-line-clamp: 2;
        /* 限制显示的行数，例如显示 3 行 */
        -webkit-box-orient: vertical;
        /* 设置盒子排列方向为垂直 */
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 显示省略号来表示溢出的内容 */
    }

    .bott {
        width: 100%;
        margin-top: 5px;

        .kss {
            width: 58px;
            height: 22px;
            background-color: #cfcece;
            border-radius: 10px;
            font-size: 13px;
            text-align: center;
            line-height: 22px;
        }
    }

}
</style>
